how to change svg image color on hover using css

/*
	You have to apply a filter, this works for any kink of image
    Play with hue-rotate and saturate to find the color you want
*/
#svg{
    filter: invert(100%) sepia(100%) saturate(1000%) hue-rotate(280deg);
 }

svg {    width: 100px;    height: 100px;}svg:hover path {    fill: red;}

<style>
.x-svg:hover g, .x-svg:hover path{
          fill: red;
      }
</style>